<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
				<view class="content-tab">
					<text class="title">手</text>
					<text class="title">机</text>
					<text class="title">号</text>
				</view>
                <input type="text" v-model="account" placeholder="请输入手机号">
            </view>
            <view class="input-row">
				<view class="content-tab">
					<text class="title">密</text>
					<text class="title">码</text>
				</view>
                <input type="text" password="true" v-model="password" placeholder="请输入密码">
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary"  style="margin-bottom:15px" @tap="bindLogin(0)">用户登录</button>
			<button type="primary" class="primary" @tap="bindLogin(1)">商家登录</button>
        </view>
        <view class="action-row">
            <navigator url="../registerUser/registerUser">注册用户账号</navigator>
			<text>|</text>
			<navigator url="../register/register">注册商家账号</navigator>
            <text>|</text>
            <navigator url="../password/password">忘记密码</navigator>
        </view>       
    </view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	
	export default {
		data() {
			return {
				account: '',
				password: '',
			};
		},
		computed: mapState(['hasLogin', 'userName','userType']),
		onLoad() {
			if(this.hasLogin){
				console.log("已登录")
				if(this.userType == 1){
					// 是商家，显示商家页面
					uni.reLaunch({		// 关闭所有页面进行跳转
						url: '../../buhome/buhome',
					});
				}else{
					// 是客户，显示客户页面
					uni.reLaunch({		// 关闭所有页面进行跳转
						url: '../../userHome/userHome'
					});
				}
			}
		},
		methods:{
			...mapMutations(['login']),
			bindLogin(type){
				// 进行登录网络请求
				// 返回用户的类型，用户或者商家。用0或1表示
				/*
					登录请求代码
				*/
			   let url='';
			   let data={
				   "phone":this.account,
				   "password":this.password
			   };
			   if(type===0){
				   url='/users/customer_login/'
			   }else if(type===1){
				   url='/users/shop_login/'
			   }
			   const res=this.$myRequest({
				   url:url,
				   method:'POST',
				   data:data
			   }).then((response)=>{
				   console.log(response.data);
				   if(response.data==='OK'){
					   uni.showToast({
					   	title:'登录成功',
						icon:'success',
						success: () => {
							this.toLogin(this.account,type);
						}
					   });
				   }else if(response.data==='用户名或密码不正确'){
					   uni.showToast({
					   	title:'用户名或密码不正确',
						icon:'none'
					   })
				   }
				   
			   })
			},
			
			toLogin(userName, userType){
				console.log(userType)
				this.login({userName, userType});
				if(this.userType == 1){
					// 是商家，显示商家页面
					console.log('tiaozhuan ')
					uni.reLaunch({		// 关闭所有页面进行跳转
						url:'../../buhome/buhome'
					});
				}else{
					// 是客户，显示客户页面
					console.log('tiaozhuan 0')
					uni.reLaunch({		// 关闭所有页面进行跳转
						url: '../../userHome/userHome'
					});
				}
			}
		}
	}
</script>

<style>
	@import '../../../common/denglu.css';
	
	.content-tab{
		display: flex;
		width: 4em;
		justify-content:space-between;
	}
	
	.input-row input{
		margin-left: 15upx;
	}
</style>
